<template>
	<!--核对填写订单信息-->
  <div class="buyOrder" @click="documentClick">
  	<HeaderOrder></HeaderOrder>
  	<div class="buyOrderContent">
  		<h4>请填写订单信息</h4>
  		<!--用户信息-->
  		<div class="buyOrderBottom">
  			<div class="userMessage">
	  			<h5>用户信息</h5>
	  			<form action="" class="buyForm">
	  				<label for="buyUsername">
	  					<span><em>*</em>姓名:</span>
	  					<input id="buyUsername" type="text" required @focus="focussing(0)" @blur="loseBlur(0)" v-model="inputMess[0].buyForm"/>
	  					<small v-if="inputMess[0].isForm===0" class="initialValue">支持输入中文、英文、数字，最长10个字符</small>
	  					<small v-if="inputMess[0].isForm===-1"></small>
						<small v-else-if="inputMess[0].isForm===1"><i></i>请输入姓名</small>
						<small v-else-if="inputMess[0].isForm===2"><i></i>支持输入中文、英文、数字，最长10个字符</small>
						<small v-else-if="inputMess[0].isForm===3" class="messCorrect"><i></i></small>
	  				</label>
	  				<br>
	  				<label for="companyName">
	  					<span>公司名称:</span>
	  					<input id="companyName" type="text" @focus="focussing(1)" @blur="loseBlur(1)" v-model="inputMess[1].buyForm"/>
	  					<small v-if="inputMess[1].isForm===0" class="initialValue">支持输入中文、英文、数字</small>
	  					<small v-if="inputMess[1].isForm===-1"></small>
						<small v-else-if="inputMess[1].isForm===1"><i></i>支持输入中文、英文、数字</small>
						<small v-else-if="inputMess[1].isForm===2" class="messCorrect"><i></i></small>
	  				</label>
	  				<br>
	  				<label for="companyAddress">
	  					<span>公司地址:</span>
	  					<input id="companyAddress" type="text" @focus="focussing(2)" @blur="loseBlur(2)" v-model="inputMess[2].buyForm"/>
	  					<small v-if="inputMess[2].isForm===0" class="initialValue">支持输入中文、英文、数字</small>
	  					<small v-if="inputMess[2].isForm===-1"></small>
						<small v-else-if="inputMess[2].isForm===1"><i></i>支持输入中文、英文、数字</small>
						<small v-else-if="inputMess[2].isForm===2" class="messCorrect"><i></i></small>
	  				</label>
	  				<br>
	  				<label for="shippingAddress">
	  					<span><em>*</em>收货地址:</span>
	  					<input id="shippingAddress" type="text" required @focus="focussing(3)" @blur="loseBlur(3)" v-model="inputMess[3].buyForm"/>
	  					<small v-if="inputMess[3].isForm===0" class="initialValue">支持输入中文、英文、数字</small>
	  					<small v-if="inputMess[3].isForm===-1"></small>
						<small v-else-if="inputMess[3].isForm===1"><i></i>请输入收货地址</small>
						<small v-else-if="inputMess[3].isForm===2"><i></i>支持输入中文、英文、数字</small>
						<small v-else-if="inputMess[3].isForm===3" class="messCorrect"><i></i></small>
	  				</label>
	  				<br>
	  				<label for="userTelephone">
	  					<span><em>*</em>手机号码:</span>
	  					<input id="userTelephone" type="text" required @focus="focussing(4)" @blur="loseBlur(4)" v-model="inputMess[4].buyForm"/>
	  					<small v-if="inputMess[4].isForm===0" class="initialValue">请输入11位手机号码</small>
	  					<small v-if="inputMess[4].isForm===-1"></small>
						<small v-else-if="inputMess[4].isForm===1"><i></i>请输入手机号码</small>
						<small v-else-if="inputMess[4].isForm===2"><i></i>请输入11位手机号码</small>
						<small v-else-if="inputMess[4].isForm===3" class="messCorrect"><i></i></small>
	  				</label>
	  				<br>
	  				<label for="fixedTelephone">
	  					<span>固定电话:</span>
	  					<input id="fixedTelephone" type="text" @focus="focussing(5)" @blur="loseBlur(5)" v-model="inputMess[5].buyForm"/>
	  					<small v-if="inputMess[5].isForm===0" class="initialValue">请输入区号+固定号码，例如：01062120000</small>
	  					<small v-if="inputMess[5].isForm===-1"></small>
						<small v-else-if="inputMess[5].isForm===1"><i></i>请输入区号+固定号码，例如：01062120000</small>
						<small v-else-if="inputMess[5].isForm===3" class="messCorrect"><i></i></small>
	  				</label>
	  				<br>
	  				<label for="emailAddress">
	  					<span><em>*</em>邮箱地址:</span>
	  					<input id="emailAddress" type="text" @focus="focussing(6)" @blur="loseBlur(6)" v-model="inputMess[6].buyForm"/>
	  					<small v-if="inputMess[6].isForm===0" class="initialValue">例如：username@email.com</small>
	  					<small v-if="inputMess[6].isForm===-1"></small>
						<small v-else-if="inputMess[6].isForm===1"><i></i>请输入邮箱</small>
						<small v-else-if="inputMess[6].isForm===2"><i></i>例如：username@email.com</small>
						<small v-else-if="inputMess[6].isForm===3" class="messCorrect"><i></i></small>
	  				</label>
	  			</form>
	  		</div>
	  		<!--支付方式-->
	  		<div class="payment">
	  			<h5>支付方式</h5>
	  			<div class="selectPay">
	  				<label for="zhiFuBao" @click="changePayWay(0)">
	  					<b :class="{'showPayWay': payway == 0}"></b>
	  					<input id="zhiFuBao" type="radio" name="slectedPay"/>
	  					<span><i></i></span>
	  				</label>
	  				<label for="onlinePay" @click="changePayWay(1)">
	  					<b :class="{'showPayWay': payway == 1}"></b>
	  					<input id="onlinePay" type="radio" name="slectedPay"/>
	  					<span><i></i></span>
	  				</label>
	  				<label for="weiXinPay" @click="changePayWay(2)">
	  					<b :class="{'showPayWay': payway == 2}"></b>
	  					<input id="weiXinPay" type="radio" name="slectedPay"/>
	  					<span><i></i>微信</span>
	  				</label>
	  				<label for="duiGongPay" @click="changePayWay(3)">
	  					<b :class="{'showPayWay': payway == 3}"></b>
	  					<input id="duiGongPay" type="radio" name="slectedPay"/>
	  					<span><i></i>对公账号</span>
	  				</label>
	  			</div>
	  		</div>
	  		<!--发票信息-->
	  		<div class="invoice">
	  			<h5>发票信息</h5>
	  			<div class="invoiceMessage">
	  				<label for="issueInvoice" @click="isInvoice">
	  					<i :class="{'invoiceShow':isShow}"></i>
	  					<span>开具发票</span> 
	  				</label>
	  				<div v-if="!isShow" class="invoiceDetails">
	  					<form action="">
	  						<div class="invoiceStyles">
	  							<span>发票类型：</span>
		  						<p class="styleSelect" @click="clickInvoice(0,$event)">{{ styleConent }}</p>
		  						<div class="styleShow" v-if="isStyle">
	  								<h6 @click="styleValue(0)">普通</h6>
	  								<h6 @click="styleValue(1)">电子发票</h6>
	  								<h6 @click="styleValue(2)">增值税专用发票</h6>
	  							</div>
		  						<i class="selectTap"></i>
	  						</div>
	  						<div class="invoiceInfo" v-if="invoiceIsShow.noZeng">
	  							<span>发票信息：</span>
	  							<p class="infoSelect" @click="clickInvoice(1,$event)">{{ infoConent }}</p>
	  							<div class="infoShow" v-if="isInfo">
	  								<h6 @click="infoValue()">商品明细</h6>
	  								<h6 @click="infoValue()">办公用品</h6>
	  								<h6 @click="infoValue()">电脑配件</h6>
	  								<h6 @click="infoValue()">日用品</h6>
	  								<h6 @click="infoValue()">电器数码</h6>
	  								<h6 @click="infoValue()">耗材</h6>
	  							</div>
		  						<i class="selectTap"></i>
	  						</div>
	  						<div class="invoiceType" v-if="invoiceIsShow.noZeng">
	  							<span>发票抬头类型：</span>
	  							<!--<input type="radio" id="personal" name="invoiceStyle"/>-->
	  							<label @click="personClick">
	  								<i :class="{'selectType':isType}"></i>
	  								<span>个人</span>
	  							</label>
	  							<!--<input type="radio" id="enterprise" name="invoiceStyle"/>-->
	  							<label @click="qiyeClick">
	  								<i :class="{'selectType':!isType }"></i>
	  								<span>企业</span>
	  							</label>
	  						</div>
	  						<div class="invoiceName" v-if="invoiceIsShow.noZeng">
	  							<span class="nameTitle">发票抬头：</span>
	  							<div v-if="isName" class="sureName">
		  							<small>{{ invoiceUser }}</small>
		  							<a href="javascript:;" @click="changeInvoice(0,$event)">修改</a>
	  							</div>
	  							<input type="text" @blur="loseInvoice(0,$event)" v-else />
	  						</div>
	  						<div class="invoiceIdentify" v-if="invoiceIsShow.isShiBieHao">
	  							<span>纳税人识别号：</span>
	  							<div v-if="isIdentify" class="sureIdentify">
	  								<small> {{ indentify }} </small>
		  							<a href="javascript:;" @click="changeInvoice(1,$event)" v-model="indentify">修改</a>
	  							</div>
	  							<div v-else class="changeIdentify">
	  								<input type="text" @blur="loseInvoice(1,$event)" @focus="earnInvoice(1,$event)"/>
	  								<em v-if="identifyInput === 1"><i></i>请输入纳税人识别号</em>
	  								<em class="fouceNotice" v-else-if="identifyInput === 2">请输入纳税人识别号</em>
	  							</div>
	  							<p class="indentifyHint">* 根据最新增值税管理办法，如需企业抬头发票，请填写有效税号信息</p>
	  						</div>
	  						<div class="invoiceTele" v-if="invoiceIsShow.isTeleEmail">
	  							<span>收票人手机：</span>
	  							<div class="changeTele">
	  								<input type="text" @blur="loseInvoice(2,$event)" v-model="telephone" @focus="earnInvoice(2,$event)"/>
	  								<em v-if="isTele===0" class="teleInputStatus">请输入11位手机号码</em>
	  								<em v-else-if="isTele===1"><i></i>请输入手机号</em>
	  								<em v-else-if="isTele===2"><i></i>手机号格式不正确</em>
	  								<em v-else-if="isTele===3" class="teleCorrect"><i></i></em>
	  							</div>
	  						</div>
	  						<div class="invoiceEmail" v-if="invoiceIsShow.isTeleEmail">
	  							<span>收票人邮箱：</span>
	  							<div class="changeEmail">
	  								<input type="text" @blur="loseInvoice(3,$event)" v-model="inEmail" @focus="earnInvoice(3,$event)"/>
	  								<em class="emailInputStatus" v-if="emialNotice === 0">请输入正确的邮箱地址，以确保接收电子发票</em>
	  								<em v-else-if="emialNotice === 1"><i></i>请输入邮箱地址</em>
	  								<em v-else-if="emialNotice === 2"><i></i>请输入正确的邮箱地址</em>
	  								<em v-else-if="emialNotice === 3" class="emialCorrect"><i></i></em>
	  							</div>
	  						</div>
	  						<div class="zzShui" v-if="invoiceIsShow.isZeng">
	  							<p>尊敬的用户，你好！</p>
	  							<p>我司暂时无法开具增值税专用发票，请关注后续动态。</p>
	  						</div>
	  					</form>
	  				</div>
	  			</div>
	  		</div>
	  		<!--支付or取消-->
	  		<div class="payAffirm">
	  			<span class="payMoney enterShow"  @click="surePay">
	  				<router-link :to='{"name":"buyOrder"}'>支付</router-link>
	  			</span>
  				<span class="payCancel">
  					<router-link :to='{"name":"buyServe"}'>取消</router-link>
  				</span>
	  		</div>
  		</div>
  	</div>
  </div>
</template>

<script>
import HeaderOrder from '@/components/header2'

export default {
  data () {
    return {
      inputMess: [ // 用户信息内容
        {
          id: 0,
          buyForm: '', // 用户信息input输入值
          isForm: -1 // 用户信息input框提示
        },
        {
          id: 1,
          buyForm: '',
          isForm: -1
        },
        {
          id: 2,
          buyForm: '',
          isForm: -1
        },
        {
          id: 3,
          buyForm: '',
          isForm: -1
        },
        {
          id: 4,
          buyForm: '',
          isForm: -1
        },
        {
          id: 5,
          buyForm: '',
          isForm: -1
        },
        {
          id: 6,
          buyForm: '',
          isForm: -1
        }
      ],
      payway: 0, // 支付方式选中状态
      isShow: true, // 开具发票选中状态
      payRouter: 'alipay', // 点击支付时，以什么方式付款
      isStyle: false, // 开具发票中发票类型点击是否出现下拉框
      styleConent: '普通', // 发票类型
      isInfo: false, // 开具发票中发票信息点击是否出现下拉框
      infoConent: '商品明细', // 发票信息
      isType: true, // 判断发票抬头类型是个人还是企业
      isName: true, // 发票抬头是否修改
      changeName: true, // 发票抬头失焦存储的值
      invoiceUser: '', // 发票抬头的内容
      isIdentify: false, // 纳税人识别号是否修改
      indentify: '', // 纳税人识别号内容
      identifyInput: 0, // 纳税人识别号提示
      isTele: 3, // 手机号提示
      telephone: '', // 手机号内容
      changeTelephone: true, // 手机号修改存储的值
      isEmail: true,
      inEmail: '', // emial中input输入的值
      changeEmail: true, // 改变emial存储的值
      emialNotice: 3, // emial提示
      sureMessage: { // 判断用户信息必填项是否填写完整
        telephone: false,
        email: false,
        address: false,
        username: false
      },
      invoiceIsShow: { // 设置开具发票内容的显示情况
        isShiBieHao: false, // 是否显示识别号
        isTeleEmail: false, // 是否显示手机号和邮箱
        isZeng: false, // 显示增值税
        noZeng: true // 不显示增值税
      }
    }
  },
  components: {
    HeaderOrder
  },
  methods: {
    // 判断用户必填信息是否完整
    userRequired (inputMess) {
      var temp = 0
      if (inputMess[0].isForm === 3 && inputMess[3].isForm === 3 && inputMess[4].isForm === 3 && inputMess[6].isForm === 3) {
        temp = 1
      } else {
        temp = 0
        for (var i = 0, l = inputMess.length; i < l; i++) {
          var mess = inputMess[i]
          if (mess.buyForm === '') {
            if (i === 0 || i === 3 || i === 4 || i === 6) {
              mess.isForm = 1
            }
          }
        }
      }
      return temp
    },
    // 判断开具发票必填信息是否完整
    invoiceRequired (invoice) {
      var temp = 0
      var tempShow = 0
      var tempStyle = 0
      if (!invoice.isShow) {
        if (invoice.styleConent === '电子发票') {
          let flag1 = 0
          let flag2 = 0
          if (invoice.isTele === 3) {
            flag1 = 1
          } else {
            flag1 = 0
          }
          if (invoice.emialNotice === 3) {
            flag2 = 1
          } else {
            flag2 = 0
          }
          if (flag1 && flag2) {
            tempShow = 1
          } else {
            tempShow = 0
          }
        } else {
          tempShow = 1
        }
        if (!invoice.isType) {
          if (invoice.indentify === '') {
            tempStyle = 0
            invoice.identifyInput = 1
          } else {
            tempStyle = 1
          }
        } else {
          tempStyle = 1
        }
        if (tempShow && tempStyle) {
          temp = 1
        } else {
          temp = 0
        }
      } else {
        temp = 1
      }
      return temp
    },
    // 用户信息输入框获取焦点
    focussing (index) {
      var that = this
      that.inputMess[index].isForm = 0
    },
    // 用户信息输入框失去焦点
    loseBlur (index) {
      // 判断条件
      var that = this
      var mess = that.inputMess[index].buyForm
      var inputMess = that.inputMess[index]
      // index=0 判断用户名
      if (index === 0) {
        if (mess === '') {
          inputMess.isForm = 1
        } else {
          if (!(/^[0-9a-zA-Z\u4e00-\u9fa5]{1,10}$/.test(mess))) {
            that.sureMessage.username = false
            inputMess.isForm = 2
          } else {
            inputMess.isForm = 3
            that.sureMessage.username = true
            if (that.changeName) {
              that.invoiceUser = mess
            }
          }
        }
      }
      // index=1判断公司名称
      if (index === 1) {
        if (mess === '') {
          inputMess.isForm = -1
        } else {
          if (/[^0-9a-zA-Z\u4e00-\u9fa5]/.test(mess)) {
            inputMess.isForm = 1
          } else {
            inputMess.isForm = 2
          }
        }
      }
      // index=2判断公司地址
      if (index === 2) {
        if (mess === '') {
          inputMess.isForm = -1
        } else {
          if (/[^0-9a-zA-Z\u4e00-\u9fa5]/.test(mess)) {
            inputMess.isForm = 1
          } else {
            inputMess.isForm = 2
          }
        }
      }
      // index=3 判断收货地址
      if (index === 3) {
        if (mess === '') {
          that.sureMessage.address = false
          inputMess.isForm = 1
        } else {
          if (/[^0-9a-zA-Z\u4e00-\u9fa5]/.test(mess)) {
            inputMess.isForm = 2
            this.sureMessage.address = false
          } else {
            inputMess.isForm = 3
            this.sureMessage.address = true
          }
        }
      }
      // index=4 判断手机号
      if (index === 4) {
        if (mess === '') {
          inputMess.isForm = 1
          that.sureMessage.telephone = false
        } else {
          if (/^1[3|4|5|8][0-9]\d{8}$/.test(mess)) {
            inputMess.isForm = 3
            that.sureMessage.telephone = true
            if (that.changeTelephone) {
              that.telephone = mess
            }
          } else {
            inputMess.isForm = 2
            that.sureMessage.telephone = false
          }
        }
      }
      // index=5判断固定号码
      if (index === 5) {
        if (mess === '') {
          inputMess.isForm = -1
        } else {
          if (/^(\d){11}$/.test(mess)) {
            inputMess.isForm = 2
          } else {
            inputMess.isForm = 1
          }
        }
      }
      // index=6判断邮箱
      if (index === 6) {
        if (mess === '') {
          inputMess.isForm = 1
          that.sureMessage.email = false
        } else {
          if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/.test(mess)) {
            inputMess.isForm = 3
            that.sureMessage.email = true
            if (that.changeEmail) {
              that.inEmail = mess
            }
          } else {
            inputMess.isForm = 2
            that.sureMessage.email = false
          }
        }
      }
    },
    // 点击改变支付方式
    changePayWay (index) {
      this.payway = index
      if (index === 0) {
        this.payRouter = 'alipay'
      } else if (index === 1) {
        this.payRouter = 'unionPay'
      } else if (index === 2) {
        this.payRouter = 'weChatPay'
      } else if (index === 3) {
        this.payRouter = 'accountPay'
      }
    },
    // 是否开具发票
    isInvoice (event) {
      var that = this
      var inputMess = that.inputMess
      that.isShow = !that.isShow
      var temp = that.userRequired(inputMess)
      if (temp) {
        that.isShow = false
      } else {
        that.isShow = true
      }
      that.invoiceUser = that.inputMess[0].buyForm
      that.telephone = that.inputMess[4].buyForm
      that.inEmail = that.inputMess[6].buyForm
    },
    // 开具发票内容点击事件
    clickInvoice (index, e) {
		var eve = e || window.event
		if(eve.stopPropagation){
			eve.stopPropagation();
		}else{
			eve.cancelBubble = true ;
		}
      if (index === 0) {
        let that = this
        that.isStyle = !that.isStyle
        that.isInfo = false
      } else if (index === 1) {
        let that = this
        that.isInfo = !that.isInfo
        that.isStyle = false
      }
    },
    // 发票类型选定
    styleValue (index) {
      var that = this
      that.styleConent = event.target.innerHTML
      if (index === 0) {
        that.invoiceIsShow.isTeleEmail = false
        that.invoiceIsShow.isZeng = false
        that.invoiceIsShow.noZeng = true
      } else if (index === 1) {
        that.invoiceIsShow.isTeleEmail = true
        that.invoiceIsShow.isZeng = false
        that.invoiceIsShow.noZeng = true
      } else if (index === 2) {
        that.invoiceIsShow.isTeleEmail = false
        that.invoiceIsShow.isShiBieHao = false
        that.invoiceIsShow.isZeng = true
        that.invoiceIsShow.noZeng = false
      }
    },
    // 发票信息选定
    infoValue () {
      var that = this
      that.infoConent = event.target.innerHTML
    },
    // 发票抬头类型
    personClick () {
      this.isType = true
      this.invoiceIsShow.isShiBieHao = false
    },
    qiyeClick () {
      this.isType = false
      this.invoiceIsShow.isShiBieHao = true
    },
    // 修改发票
    changeInvoice (index, event) {
      if (index === 0) {
        this.isName = false
      } else if (index === 1) {
        this.isIdentify = false
      }
    },
    // 发票获取焦点事件
    earnInvoice (index, event) {
      if (index === 1) {
        this.identifyInput = 2
      } else if (index === 2) {
        this.isTele = 0
      } else if (index === 3) {
        this.emialNotice = 0
      }
    },
    // 发票失焦事件
    loseInvoice (index, event) {
      var that = this
      var content = event.target.value
      var mess = that.inputMess
      // 发票抬头失焦事件
      if (index === 0) {
        if (content === mess[0].buyForm) {
          that.changeName = true
        } else {
          that.changeName = false
          if (content === '') {
            that.invoiceUser = '无'
          } else {
            that.invoiceUser = content
          }
        }
        that.isName = true
      // 纳税人识别号失焦事件
      } else if (index === 1) {
        if (content === '') {
          that.identifyInput = 1
        } else {
          that.isIdentify = true
          that.indentify = content
          that.identifyInput = 0
        }
      } else if (index === 2) {
        if (content === mess[4].buyForm) {
          that.changeTelephone = true
          that.isTele = 3
        } else {
          that.changeTelephone = false
          if (content === '') {
            that.isTele = 1
          } else {
            if (/^1[3|4|5|8][0-9]\d{8}$/.test(content)) {
              that.telephone = content
              that.isTele = 3
            } else {
              that.telephone = content
              that.isTele = 2
            }
          }
        }
      } else if (index === 3) {
        if (content === mess[6].buyForm) {
          that.changeEmail = true
          that.emialNotice = 3
        } else {
          that.changeEmail = false
          if (content === '') {
            that.isEmail = true
            that.emialNotice = 1
          } else {
            if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/.test(content)) {
              that.inEmail = content
              that.isEmail = true
              that.emialNotice = 3
            } else {
              that.isEmail = false
              that.emialNotice = 2
            }
          }
        }
      }
    },
    // 点击支付事件
    surePay () {
      var that = this
      var inputMess = that.inputMess
      var temp = that.userRequired(inputMess) && that.invoiceRequired(that)
      if (temp) {
        that.$router.push({path: '/buyIndex/' + that.payRouter})
      }
    },
    // 整个内容页面的点击事件
    documentClick () {
      this.isStyle = false
      this.isInfo = false
    }
  }
}
</script>

<style scoped>
  @import '../../../../static/buy/buyOrder.css';
</style>